const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader')
 
module.exports = {
    mode: 'development',
    devtool: 'inline-source-map', //将编译后的代码映射回原始源代码
    entry: './src/main.js',
    output: {
        filename: '[name].js', //打包后文件名
        path: path.resolve(__dirname, 'dist'),
        clean: true, //在每次构建前清理 /dist 文件夹
        assetModuleFilename: 'images/[hash:6]-[name][ext][query]', // 指定导出的文件名,只有asset/resource才可以指定文件名
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', //打包的文件
            title: 'webpack-demo',
            filename: "index.html", //打包后的名称
        }),
        new VueLoaderPlugin(),
    ],
    module: {
        rules: [			
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader',{
                loader: "less-loader",
                options: {
                  lessOptions: {
                      "modifyVars":{
                          /* less 变量覆盖，用于自定义 ant design 主题 */
                          'primary-color': '#1890FF'
                      },
                        javascriptEnabled: true,
                      }
                }
            }]},
            {test: /\.s[ac]ss$/,use: ['style-loader','css-loader','sass-loader']},
            //自动地在 resource 和 inline 之间进行选择：小于 4kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。
            {test:/\.(jpg|png|gif|svg|jpeg)$/,type: 'asset',parser: {dataUrlCondition: {maxSize: 4 * 1024}}},
            {test:/\.(ttf|woff|svg|eot)$/,type: 'asset/inline',},
            {test:/\.vue$/,use:'vue-loader'},
            {test: /\.js$/,exclude: /node_modules/,use: "babel-loader",},
        ],
    },
    resolve: {
        modules: [path.resolve(__dirname, 'src'), 'node_modules'],
        extensions: ['.js', '.vue','.less','...'],
        alias: {
            '@': path.resolve(__dirname, 'src'),

        },
    },
 
};